<!doctype html>

<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta http-equiv="Content-Language" content="es-ES"/>		
		<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
		<link rel="stylesheet" href="../css/Icons.css" />
		<link rel="stylesheet" href="../css/hobbyp.css" />
								
		<script src="../js/JQuery/jquery.min.js"></script>				
		<script src="../js/JQuery/jquery.mobile.min.js"></script>	
		<script src="../js/Comun.js"></script>
		<script src="../js/MySQLLib/MySQL.js"></script>
		<script src="../js/MySQLLib/BDEntity.js"></script>
		<script src="../js/phonegap/PGNavigation.js"></script>
		<script src="js/Listado.js"></script>
		<script src="js/ListadoFriends.js"></script>
		<script src="js/Requests.js"></script>
		<script src="../js/Hobbyp.js"></script>
		<script src="../js/Mailer.js"></script>
		<script src="js/Friends.js"></script>
		<script src="js/Invite.js"></script>
		
			<style>
			.split-button-custom {
			    float: right;
			    margin-right: 10px;
			    margin-top: -32px;
			    border-bottom-left-radius: 1em 1em;
			    border-bottom-right-radius: 1em 1em;
			    border-top-left-radius: 1em 1em;
			    border-top-right-radius: 1em 1em;   
			}
			
			.split-button-custom span.ui-btn-inner {
			    border-bottom-left-radius: 1em 1em;
			    border-bottom-right-radius: 1em 1em;
			    border-top-left-radius: 1em 1em;
			    border-top-right-radius: 1em 1em;
			    padding-right: 0px;
			}
			
			.split-button-custom span.ui-icon {
			    margin-top: 0px;
			    right: 0px;
			    top: 0px;
			    position: relative;
			}
		</style>
		
		<title>Hobbyp</title>
	</head>
	<body>
		<!--Friends -->
		<div data-role="page" data-theme="c"  id="Friends" >
			<div data-role="header" data-position="fixed" class="headerLogo" >				
				<select  id="lvHobbies" onchange="hobbypChange(this);"  >										
				</select>				
				<a href="../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
				<a href="javascript:hrefParams('../Config/Config.html');" data-icon="user" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
			</div>			
			<div data-role="content" data-theme="a" >				
				<div data-role="fieldcontain" data-scroll="y">
					<h1><label id="lblMyRequests"></label></h1>			
					<div class="content-primary" >
						<div data-role="fieldcontain" data-scroll="y">
							<a id="addFriend" href="#Invite" data-role="button" data-icon="plus" data-inline="true" data-rel="dialog" data-transition="pop">Invitar</a>					
						</div>
						<!--
						<label class="labelMultiidioma" for="FriendsList" id="Friends">Friends:</label>
						-->						
						<div data-role="collapsible-set" id="FriendsList">
						</div>			
					</div>
				</div>
				<!--
				<div data-role="fieldcontain" data-scroll="y">
					<a id="addFriend" href="NewFriend.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">New</a>					
				</div>
				-->
			</div>
			
			<div data-role="footer" class="footer-docs" data-theme="a"  data-position="fixed" data-fullscreen="true">
				<div data-role="navbar" id="navbarId">
					<ul>
						<li><a class="labelMultiidioma ui-icon-news"          href="javascript:hrefParams('../News/News.html');"         rel="external" data-ajax="false" id="News"     >News</a></li>
	    				<li><a class="labelMultiidioma ui-icon-diary"         href="javascript:hrefParams('../Diary/Diary.html');"       rel="external" data-ajax="false" id="Diary"    >Diary</a></li>
						<li><a class="labelMultiidioma ui-icon-messages"      href="javascript:hrefParams('../Messages/Messages.html');" rel="external" data-ajax="false" id="Messages" >Messages</a></li>	
						<li><a class="labelMultiidioma ui-icon-config-active" href="#"   rel="external" data-ajax="false" id="Friends"   >Friends</a></li>
					</ul>
				</div>	
			</div>	
		</div>	
		<!--Invite -->
		<div data-role="page" data-theme="c" id="Invite">		
			<div data-role="content" data-theme="a">	
				<h2>
					Invite a sus contactor y mantenga sincronizados sus intereses
				</h2>
				<div data-role="fieldcontain" data-scroll="y">
					<label for="Email">Email:</label>
					<table style='width:100%'>
						<tr>
						    <td>
						        <input type="text" id="Email" data-inline="true" />
						    </td>
						    <td>
						         <button id="btnSend" onclick="btnSendClick()" data-inline="true" data-mini="true">Send invitation</button>
						    </td>
						</tr>
					</table>
					
					
				</div>						
				<div data-role="fieldcontain" data-scroll="y">
					<label for="nombre">Nombre:</label>
					<input type="text" id="nombre"/>
				</div>			
				<div data-role="fieldcontain" data-scroll="y">
					<label for="listHobbies">Interes:</label>
					<select id="listHobbies" >
					</select>
				</div>
				<div data-role="fieldcontain">
					<label for="PersonalDescription">Descripción personal:</label>
					<input type="text" id="PersonalDescription"/>
				</div>
				<div data-role="controlgroup"  data-type="horizontal">
					<button id="addHob"  data-inline="true" data-inline="true" data-mini="true">Buscar</button>
					<button id="btnCancel" data-inline="true" data-rel="back" data-inline="true" data-mini="true">Cancel</button>					
				</div>
				<br/>
				<div data-role="popup" id="popupResultList" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width:340px;">
					<ul data-role="listview" data-inset="true"  id="listviewId" data-split-icon="Gear">
					</ul>	
				</div>
				<div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width:340px;">
					<h3>Send message?</h3>
					<p>
						<textarea cols="40" rows="8" name="message" id="message"></textarea>						
					</p><!-- data-rel="back" -->
					<a href="javascript:sendMessage();" rel="external" data-ajax="false" data-role="button" data-theme="b" data-icon="check" data-inline="true" data-mini="true" >Send</a>
					<a href="index.html" id="btnCancel" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>	
				</div>		
			</div>				
		</div><!--/page-->				
	</body>
</html>

